import QtQuick 2.0

Item {
    id:boardItem
    visible: true
    width: 245
    height: 245

    property int current_angle: 0
    property int r: 115
    property bool display_mode: false
    property double current_speed: 0
    property int current_engine: 0
    property int gear_position: 0
    property int gear_direction: 0
    property int max_speed: 13
    property int max_engine: 2200

    Image{
        source: "qrc:/imgs/yi_biao.png"
        anchors.centerIn: parent
        width: 350
        height: 350
    }
    onCurrent_speedChanged: {
        current_angle = current_speed/max_speed * 270
        canvas.requestPaint()
    }
    onCurrent_engineChanged: {
        current_angle = current_engine/max_engine * 270
        canvas.requestPaint()
    }

    onGear_positionChanged: {
        canvas.requestPaint()
    }
    onGear_directionChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        width: parent.width
        height: parent.height
        
        onPaint: {
            var ctx = getContext("2d");
            ctx.reset();
            ctx.save()

            ctx.translate(canvas.width / 2, canvas.height / 2)
            //  // 底图
            // ctx.clearRect(-width/2, -height/2, width, height);
            // ctx.fillStyle  = "#662B5A78";
            // ctx.beginPath();
            // ctx.arc(0, 0, boardItem.r, 0, 2 * Math.PI);
            // ctx.closePath();
            // ctx.fill();

            var startRadian = Math.PI/8 + Math.PI/2
            var endRadian = 2*Math.PI - Math.PI/8 + Math.PI/2
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = 150;
            var gradient = ctx.createLinearGradient(0,-radius , 0, radius);
            gradient.addColorStop(0, "#00FFFF");
            gradient.addColorStop(1, "#005696");
            ctx.save()
            ctx.lineWidth = 14;
            ctx.lineCap = "round"
            ctx.strokeStyle = "#285069";
            ctx.beginPath();
            ctx.arc(0, 0, boardItem.r - 20 , startRadian, endRadian);
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 14;
            ctx.lineCap = "round"
            ctx.strokeStyle = gradient;
            ctx.beginPath();
            ctx.arc(0, 0, boardItem.r - 20, Math.PI/2 + Math.PI/8, (boardItem.current_angle+90)/180*Math.PI+ Math.PI/8);
            ctx.stroke()
            ctx.restore()

            var x = (boardItem.r - 20) * Math.cos(boardItem.current_angle/180*Math.PI+90/180*Math.PI+ Math.PI/8)
            var y = (boardItem.r - 20) * Math.sin(boardItem.current_angle/180*Math.PI+90/180*Math.PI+ Math.PI/8)
            ctx.fillStyle  = "#000000";
            ctx.beginPath();
            ctx.arc(x,y, 5, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle  = "rgba(00, 255, 255, 0.5)";
            ctx.beginPath();
            ctx.arc(x,y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();

            if(boardItem.display_mode)
            {
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "50px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String((boardItem.current_engine)),0,0)//
                ctx.restore()

                //绘制当前单位
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "24px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String("rpm"),0,40)
                ctx.restore()
            }else
            {
                //绘制当前速度值
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "60px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String(boardItem.current_speed),0,0)
                ctx.restore()

                //绘制当前单位
                ctx.save()
                ctx.fillStyle = "white"
                ctx.font = "24px Aldrich"
                ctx.textAlign = "center"
                ctx.fillText(String("km/h"),0,40)
                ctx.restore()
            }
        }

    }

}
